<template>
  <div>
    <bread-crumb two="商品管理" three="参数分类"></bread-crumb>

    <!-- 卡片区 -->
    <el-card class="box-card">
      <!-- Alert 警告 -->
      <el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" show-icon></el-alert>

      <!-- 级联选择器 -->
      <el-row>
        <el-col>
          选择商品分类：
          <el-cascader
            expandTrigger="hover"
            v-model="catThreeSelect"
            :options="catThreeList"
            :props="catThreeProps"
            @change="handleChange"
            clearable
          ></el-cascader>
        </el-col>
      </el-row>

      <!-- 标签页 -->
      <el-tabs @tab-click="handleClick" v-model="activeName">
        <el-tab-pane label="动态参数" name="many">
          <el-button type="primary" size="mini" :disabled="showButton" @click="showAddDialog">添加参数</el-button>
          <!-- table表格 -->
          <el-table
            :data="manyParamsList"
            style="width: 100%"
            border
            v-for="item in manyParamsList"
            :key="item.attr_id"
          >
            <el-table-column width="50" type="expand">
              <template slot-scope="info">
                <el-tag :key="item" v-for="item in info.row.attr_vals_array">{{item}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="#" type="index" width="50"></el-table-column>
            <el-table-column prop="attr_name" label="参数名称"></el-table-column>
            <el-table-column prop="address" label="操作">
              <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="only">
          <el-button type="primary" size="mini" :disabled="showButton" @click="showAddDialog">添加属性</el-button>
          <!-- table表格 -->
          <el-table :data="onlyParamsList" style="width: 100%" border>
            <el-table-column width="50" type="expand">
              <template slot-scope="info">
                <el-tag :key="item" v-for="item in info.row.attr_vals_array">{{item}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="#" type="index" width="50"></el-table-column>
            <el-table-column prop="attr_name" label="参数名称"></el-table-column>
            <el-table-column prop="address" label="操作">
              <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 添加参数Dialog -->
    <el-dialog :title="sel_title" :visible.sync="addFormDialog" width="40%">
      <el-form :model="addForm" ref="addFormRef" :rules="addFormRules">
        <el-form-item :label="sel_label" label-width="100px" prop="attr_name">
          <el-input v-model="addForm.attr_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFormDialog = false">取 消</el-button>
        <el-button type="primary" @click="addFormDialog=false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created () {
    this.renderList()
  },
  methods: {
    // 级联选择器内容变化后的回调函数,可以感知到选择的分类信息
    handleChange () {
      // console.log(this.catThreeSelect)
      if (this.catThreeSelect.length !== 3) {
        this.showButton = true
        // 只要不是选择3级类别，就数组清空，选择器中的内容不会显示
        this.catThreeSelect = []
        this.catThreeId = 0
        // 一旦不是3级类别，清空获取到的级别数据
        this.manyParamsList = []
        this.onlyParamsList = []
        this.addForm.attr_id = this.addForm.id = 0
      } else {
        this.showButton = false
        this.addForm.attr_id = this.catThreeId = this.catThreeSelect[2]
        this.addForm.id = this.catThreeSelect[0]

        // this.addForm.cat_id = this.catThreeSelect[2]
        // 获取当前的参数信息
        this.getParamsList()
        console.log(this.catThreeSelect)
      }
    },
    // 获取所有商品分类
    async renderList () {
      const { data: dt } = await this.$http.get('categories', {
        params: { type: 3 }
      })
      // 所有商品分类
      // console.log(dt.data)
      this.catThreeList = dt.data
    },

    // Tabs标签页切换时触发事件
    handleClick () {
      // console.log(tab, event)
      // 切换Tab时，并且也选择了当前分类时，调用方法获取响应参数
      if (this.catThreeId !== 0) {
        this.getParamsList()
      }
    },

    // 获取参数信息
    async getParamsList () {
      const { data: dt } = await this.$http.get(
        'categories/' + this.catThreeId + '/attributes',
        { params: { sel: this.activeName } }
      )
      // console.log(dt)
      // console.log(this.activeName)
      // 判断activeName的值
      this.activeName === 'many'
        ? (this.manyParamsList = dt.data)
        : (this.onlyParamsList = dt.data)
      // 将描述中(attr_vals)中的空格去除展开为一个数组，并将其称为项目中的成员
      dt.data.forEach(item => {
        item.attr_vals_array = item.attr_vals.split(' ')
      })
      console.log(dt.data)
    },
    // 显示添加Dialog
    showAddDialog () {
      this.addFormDialog = true
      this.addForm.attr_sel = this.activeName
      // console.log(this.activeName)
      if (this.activeName === 'many') {
        this.sel_title = '添加动态参数'
        this.sel_label = '动态参数'
      } else {
        this.sel_title = '添加静态属性'
        this.sel_label = '静态属性'
      }
      console.log(this.addForm)
    }
    // 收集添加Dialog框的数据
    // addAttrName () {
    //   this.$refs.addFormRef.validate(async valid => {
    //     if (valid) {
    //       const { data: dt } = await this.$http.post(
    //         'categories/' + this.addForm.id + '/attributes/',
    //         this.addForm
    //       )
    //       // console.log(dt)
    //       this.$message.success(dt.meta.msg)
    //       this.renderList()
    //       this.addFormDialog = false
    //     }
    //   })
    // }
  },
  data () {
    return {
      // 接收3级别分类
      catThreeList: [],
      // 接收3级别分类激活的信息
      catThreeSelect: [],
      // 级联选择器属性定义
      catThreeProps: {
        value: 'cat_id',
        label: 'cat_name'
      },
      // 被选中后3级类别cat_id值
      catThreeId: 0,
      // Tabs标签页数据
      // 展示某个标签页，也可以直接写成value="many"但是动态变化的，所以使用v-model，未变化之前，则是默认展示
      activeName: 'many',
      // 控制按钮是否禁用
      showButton: true,
      // 参数列表
      manyParamsList: [],
      // 属性列表
      onlyParamsList: [],

      // 添加参数Dialog数据
      addFormDialog: false,
      addForm: {
        attr_name: '',
        id: 0,
        attr_sel: '',
        attr_vals: '',
        attr_id: 0
      },
      sel_title: '',
      sel_label: '',

      // addForm表单校验
      addFormRules: {
        attr_name: [
          { required: true, message: '请输入参数名称', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-alert {
  margin-bottom: 15px;
}
.el-tag {
  margin: 0 5px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
